<template>
  <div class="login">
    <open-data type="userNickName"></open-data>
    <van-image  width="100%" height="150" src="/static/img/banner.jpg"/>
    <div style="height: 100px;display: flex;height: 100px;flex-direction: column;justify-content: center;">
      <van-button type="primary" @click="getUserProfile" >微信用户一键登录</van-button>
    </div>
<!--    <van-dialog id="van-dialog" bind:confirm="confirm" bind:getUserProfile="getUserProfile"  bind:getphonenumber="getphonenumber"/>-->
    <!--  手机号注册，后面实现  -->
<!--    <div class="login-account">-->
<!--      <van-button type="primary" @click="loginByTelephone" >手机号验证注册/登录</van-button>-->
<!--    </div>-->

    <div class="login-account">
      <van-button type="primary" @click="logout" >退出登录</van-button>
    </div>
  </div>
</template>

<script>
  import Dialog from '../../../../static/vant/dialog/dialog'
  import store from '@/utils/store.js'

  export default {
    config: {
      navigationBarTitleText: '登录'
    },
    data() {
      return {
        user: {nickName: '立即登录'}
      }
    },
    onLoad(options) {
      // this.GetUser()   // 进入页面后获取用户的信息已被微信禁止
    },

    confirm() {
      console.log('confirm')
    },
    methods: {
      GetUser() {
        // let that = this
        Dialog.alert({
          title: '登录',
          message: '必须授权才可以继续使用',
          confirmButtonOpenType: 'getUserProfile', // 按钮的微信开放能力
          showCancelButton: true,
          confirmButtonText: '授权登录'
        }).then(() => {

        }).catch(() => {

        })
      },

      confirm() {
        console.log('confirm')
      },

      /** 授权-新接口 */
      getUserProfile() {


        // this.$API.post('/wechat/appGetWxOpenId', {
        //   code: '0011GIkl2UaR594mHanl2Lh5j201GIkB',
        //   avatarUrl: 'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTI8HHOABSSicsrqg9CavnIX7mIDFN1hKvwRhUCMklx83CRIia45Q6kysIeqL1mXR0weNC4PnvABblag/132',
        //   nickName: '哈 ~ lulu'
        // }).then(res => {
        //   console.log('res getWxOpenId', res)
        //   store.commit('setToken', res.data.token)
        //   store.commit('setUser', res.data.user)
        //   wx.setStorageSync('userInfo', res.userInfo)
        //   // 返回我的个人中心页
        //   wx.navigateBack({delta: 1})
        // })

        // const token = store.state.token
        // if (token) {
        //   return
        // }

        let that = this

        wx.getUserProfile({
          desc: '必须授权才可以继续使用',
          success: res => {
            console.log('授权成功', res)
            wx.setStorageSync('userInfo', res.userInfo)
            let avatarUrl = res.userInfo.avatarUrl
            let nickName = res.userInfo.nickName
            wx.login({
              success (res) {
                if (res.code) {
                  console.log(res)
                  // 发起网络请求
                  that.$API.post('/wechat/appGetWxOpenId', {
                    code: res.code,
                    avatarUrl: avatarUrl,
                    nickName: nickName
                  }).then(res2 => {
                    console.log('res getWxOpenId', res2)
                    store.commit('setToken', res2.data.token)
                    store.commit('setUser', res2.data.user)

                    // 返回我的个人中心页
                    wx.navigateBack({delta: 1})
                  })
                } else {
                  console.log('登录失败！' + res.errMsg)
                }
              }
            })
          }
        })

      },

      GetUserPhone() {
        // let that = this
        Dialog.alert({
          title: '登录',
          message: '是否允许获取您的手机号',
          confirmButtonOpenType: 'getPhoneNumber', // 按钮的微信开放能力
          showCancelButton: true,
          confirmButtonText: '授权'
        }).then(() => {

        }).catch(() => {

        })
      },

      getphonenumber(e) {
        console.log(e)
      },

      loginByTelephone() {
        const url = '../loginAccount/index'
        wx.navigateTo({url})
      },
      logout() {
        wx.removeStorageSync('userInfo')

        store.commit('setToken', null)
        store.commit('setUser', null)
        // 返回我的个人中心页
        wx.navigateBack({delta: 1})
      }
    }
  }
</script>


<style>
  .login {
    margin:5px;
    text-align: center;
  }
  .login-account{
    padding-top:15px;
  }
</style>
